<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<title>Escolher Mecânica</title>

<link rel="stylesheet" type="text/css" href="images/view.css" media="all">
<script type="text/javascript" src="images/view.js"></script>


	<style type="text/css">
	

    .divOuter{
        display:inline;
        text-align:center;
    }

    .divInner, .divInner1, .divInner2, .divInner3{
        border: 1px solid;
        float:left;
        width:130px;
        height:200px;
        margin-left:20px;
        margin-right:20px;
		margin-top:20px;
		margin-bottom:70px;
		
    }
	
#personacard {
 background: url(pcard.png) bottom right
}

#personacard-convidado {
 background: url(pcard-convidado.png) bottom right
}

#descricao-card {
 position:relative;
 top:23px;
 left:0px;
 font-size:12px;
}

#foto-card {
 background: url(foto-card.png);
 position:relative;
 top:27px;
 left:0px;
 height: 100px;
}

#foto-card-sempersona {
 position:relative;
 top:27px;
 left:0px;
 height: 100px;
}



#projeto-card {
 position:relative;
 top:90px;
 left:0px;
 height: 100px;
 font-size:12px;
}
    </style>
	
	<script type="text/javascript"></script>
	
	<style type="text/css" media="all">
		@import "images/lay.css";
	</style>
	
</head>

<body>

<div id="container">

	<div id="intro">
		<div id="pageHeader">
			<h1><span>Header</span></h1>
			<h2><span>Sub-header</span></h2>
		</div>

		<div id="quickSummary">
		
			<p class="p1"><span></span></p>
			<p class="p2"><span>E-mail: voce@local.com</span></p>
			<p class="p2"><span>E-mail: voce@local.com</span><br/>
			Idade: 20 anos<br/>
			Sexo: Não se sabe<br/>
			Telefone: Quebrou</p>
			
		</div>

		<div id="preamble">
		<br/>
		<br/>
		
	<div id="form_container">
	
		<form id="form_443163" class="appnitro" enctype="multipart/form-data" method="post" action="/escolherMecanica">
					<div class="form_description">
			<h2>Escolha de Mecânica</h2>
			<p>Refine sua busca</p>
		</div>						
		
			
					
		<div>
		<select class="element select small" id="element_4" name="tipo">
			{% if not cinetica %}
				<option value="1" selected="selected" >Lugar</option>
				<option value="2">Roupa</option>
				<option value="3">Filme</option>
				<option value="4">Hobby</option>
				<option value="5">Música</option>
				<option value="6">Jogo</option>
				<option value="7">Livro</option>
			{% else %}
				<option value="8" selected="selected">Cinética</option>
			{% endif %}
		</select>
		</div> 
		<input id="saveForm" class="button_text" type="submit" name="submit" value="Buscar Mecânica" />
		</form>
		
		{% if mecanicas %}
			{% for mecanica in mecanicas%}
				{% if vinc %}
					{% if cinetica %}
						<a href="/cenario?vinc=1&mid={{mecanica.mid}}">
					{% else %}
						{% if vincc %}
							<a href="/criarPersona2?mid={{mecanica.mid}}&vincc=1">
						{% else %}
							<a href="/criarPersona2?mid={{mecanica.mid}}">
						{% endif %}
					{% endif %}
				{% endif %}
				<div id="personacard" class='divInner'>
					{{mecanica.tipo}} - {{mecanica.nome}}
					<div id="foto-card">
						{% if mecanica.mid %}
			        		<img src="img?id={{mecanica.mid}}&tipo=m">
			        	{% endif %}	
					</div>
					<div id="descricao-card">
				        {{mecanica.descricao}}
					</div>   
				</div>
				</a>
			{% endfor %}
		{% endif %}



<br/>
<br/>
<br/>
<br/>
		
	</div>
	
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			

		<div id="footer">
			Este site foi bla bla bla bla bla bla bla bla. Mais info...
			Aqui é o footer.
		</div>

	</div>

	
	<div id="linkList">
		<!--extra div for flexibility - this list will probably be the trickiest spot you'll deal with -->
		<div id="linkList2">

		<!-- If you're wondering about the extra &nbsp; at the end of the link, it's a hack to meet WCAG 1 Accessibility. -->
		<!-- I don't like having to do it, but this is a visual exercise. It's a compromise. -->
			<div id="lselect">
				<h3 class="select"><span>Seção:</span></h3>
				<!-- list of links begins here. There will be no more than 8 links per page -->
				<ul>
					<li>Lista 1</li>
					<li>Lista </li>
					<li>Lista </li>
					<li>Lista </li>
					<li>Lista </li>
					<li>Lista </li>
					
				</ul>
			</div>

			<div id="larchives">
				<h3 class="archives"><span>Seção:</span></h3>
				<ul>
					<li>Lista </li>
					<li>Lista </li>
				</ul>
			</div>
			
			<div id="lresources">
				<h3 class="resources"><span>Resources:</span></h3>
				<ul>
					<li>Lista </li>
					<li>Lista </li>
					<li>Lista </li>
					<li>Lista </li>
					<li>Lista </li>
				</ul>
			</div>
		</div>
	</div>


</div>

<!-- These extra divs/spans may be used as catch-alls to add extra imagery. -->
<!-- Add a background image to each and use width and height to control sizing, place with absolute positioning -->
<div id="extraDiv1"><span></span></div><div id="extraDiv2"><span></span></div><div id="extraDiv3"><span></span></div>
<div id="extraDiv4"><span></span></div><div id="extraDiv5"><span></span></div><div id="extraDiv6"><span></span></div>

</body>
</html>
